<template>
	<view>
		<status-bar title='全部派单'></status-bar>
		<view class="nav" :style="{'top':`${totalHeight}px`}">
			 <u-tabs :list="list1" @click="changTab" :itemStyle="itemStyle" 
			         :lineColor="color" :inactiveStyle="inactiveStyle" 
					 :activeStyle="activeStyle" ></u-tabs>
		</view>
		
		<view class="rows  p-top100">
			
			<view class="list m-bot20" 
			     v-for="(item,index) in pageData" :key="index"
				 @click="toUrl(`details?res_id=${item.res_id}`)">
				<view class="row j-sb a-center">
					<text class="color_33 size28">订单号：{{item.order_code}}</text>
					<view class="State " 
					     :class="{'setout':item.state == 1,'complete':item.state == 2,'Lose':item.state == 3}">{{item.state | stateTxt}}</view>
				</view>
				<view class="row a-center m-top20 " 
				      :class="{'bot p-bot24':sIndex+1 != item.goodsList.length}"
				     v-for="(sItem,sIndex) in item.goodsList" :key="sIndex">
					<image :src="$imgUrls(sItem.photo)" mode="aspectFill" class="imgs m-right20"></image>
					<view class="flex-1 d-flex f-column j-sb content ">
						<view class="d-flex a-center ">
							<text class="color_33 size26">{{item.res_name}}</text>
							<text class="color_33 size22 m-left10" selectable >{{item.res_tel}}</text>
						</view>
						<text class="ellipsis_2 h6 color_99" selectable>{{item.res_address}}</text>
						<view class="color_99 h6">预约时间：{{item.reservationDate}}</view>
					</view>
					<view class="d-flex f-column a-center m-left8">
						<text class="color_33 size22">安装费</text>
						<view class="d-flex a-center color_ff2 m-top8">
							<text class="h7">￥</text>
							<text class="size30">{{sItem.install_money}}</text>
						</view>
					</view>
				</view>
				
				
			</view>
			
			
		  <emptys v-if="!pageData.length" title="暂无相关信息~~"></emptys>
			
			
		</view>
		
		
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				getMore:true,
				list1:[{
					name:'全部',
					state:'',
				},{
					name:'待安装',
					state:1,
				},{
					name:'已完成',
					state:2,
				}],
				current:0,
				itemStyle:{
					height:'36px',
				
				},
				inactiveStyle:{
					color:'#777777'
				},
				activeStyle:{
					color:'#000000',
					fontWeight:'bold'
				},
				state:'',
				page:1,
				pageNum:10,
				pageData:[],
			}
		},
		onLoad() {
			this.apiOrderList();
		},
		methods: {
			apiOrderList(){
				this.$http.post({
					url:'/dispatch/apiOrderList',
					data:{
						state:this.state,
						page:this.page,
						pageNum:this.pageNum,
					}
				}).then(res=>{
					if(res.code != 100) return;
					const result = res.data || [];
					this.page == 1?this.pageData = result:this.pageData = this.pageData.concat(result);
					if(!result.length) this.getMore = false;
					
				})
			},
			changTab(e){
				this.state = e.state;
				this.page = 1;
				this.getMore = true;
				this.apiOrderList();
			}
		},
		filters:{
			stateTxt(val){
				if(val == '1') return '待安装';
				if(val == '2') return '成功';
				if(val == '3') return '失败';
			}
		},
		computed:{
			...mapState(['color','totalHeight'])
		}
	}
</script>

<style>
	page{
		background-color: #f6f6f6;
	}
</style>
<style lang="scss" scoped>
	.nav{
		width:100%;
		height: 80rpx;
		padding:0 20rpx;
		box-sizing: border-box;
		background-color: #ffffff;
		position: fixed;
	
		left:0;
		z-index:100;
	}
	.list{
		width:100%;
		background-color: #ffffff;
		padding:20rpx 30rpx;
	}
	.State{
		min-width:100rpx;
		height: 40rpx;
		padding:0 10rpx;
		border-radius: 8rpx;
		text-align: center;
		line-height: 40rpx;
		color:#ffffff;
		font-size: 24rpx;
	}
	.Lose{
		background-color: #FF6046;
	}
	.complete{
		background-color: #21DCA1;
	}
	.setout{
		background-color: #FFA146;
	}
	.imgs{
		width:140rpx;
		height: 140rpx;
		border-radius: 8rpx;
	}
	.content{
		height: 140rpx;
	}
</style>
